import { Menu, MenuItem } from '@material-ui/core';
import AppBar from '@material-ui/core/AppBar';
import IconButton from '@material-ui/core/IconButton';
import InputBase from '@material-ui/core/InputBase';
import { fade, makeStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { Home, Menu as MenuIcon } from '@material-ui/icons';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import SearchIcon from '@material-ui/icons/Search';
import React, { useState } from 'react';
import { ListItemType } from '.';
import RootFolderDialog from '../../components/RootFolderDialog';
import SettingsDialog from '../../components/SettingsDialog';
import { useDirectory, useRootFolders } from '../../context';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    marginRight: theme.spacing(2),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing(1),
      width: 'auto',
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: '12ch',
      '&:focus': {
        width: '20ch',
      },
    },
  },
}));

interface TopBarProp {
  keyword: string;
  setKeyword: (keyword: string) => void;
  setListData: (listData: ListItemType[]) => void;
}

export default function TopBar ({ keyword, setKeyword, setListData }: TopBarProp) {
  const classes = useStyles();
  const { directory, setDirectory } = useDirectory();
  const { rootFolders } = useRootFolders();
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [rootFolderOpen, setRootFolderOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const isRootFolder = rootFolders.includes(directory.join('\\'));

  const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuSettings = () => {
    setSettingsOpen(true);
    handleMenuClose();
  };

  const handleMenuRootFolder = () => {
    setRootFolderOpen(true);
    handleMenuClose();
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  return (
    <div className={classes.root}>
      <AppBar position="fixed">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            onClick={() => {
              if (!isRootFolder) {
                setListData([]);
                setDirectory(directory.splice(0, directory.length - 1));
              }
            }}
          >
            {isRootFolder ? <Home/> : <ArrowBackIosIcon/>}
          </IconButton>
          <Typography className={classes.title} variant="h6" noWrap>
            Video Player
          </Typography>
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon/>
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              value={keyword}
              onChange={e => setKeyword(e.target.value)}
            />
          </div>

          <IconButton edge={'end'} color={'inherit'} onClick={handleMenuClick}>
            <MenuIcon/>
          </IconButton>
          <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleMenuClose}
          >
            <MenuItem onClick={handleMenuSettings}>设置</MenuItem>
            <MenuItem onClick={handleMenuRootFolder}>根目录</MenuItem>
          </Menu>
        </Toolbar>
      </AppBar>

      <SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)}/>
      <RootFolderDialog open={rootFolderOpen} onClose={value => {
        if (value) {
          setDirectory(value.split('\\'));
        }
        setRootFolderOpen(false);
      }}/>
    </div>
  );
}
